﻿{extend name="public:base" /}{block name="css"}
<link rel="stylesheet" type="text/css" href="/static/layui/css/layui.css"/>
<link rel="stylesheet" type="text/css" href="__ADMIN__/css/style.css">
<link rel="stylesheet" type="text/css" href="__PLUG__/webuploader-0.1.5/webuploader.css">
<style>
    layui-progress-big, .layui-progress-big .layui-progress-bar {
        height: 30px;
        line-height: 30px
    }

    .layui-progress {
        position: relative;
        height: 30px;
        border-radius: 20px;
        background-color: #eee;
    }

    .layui-progress-text {
        position: relative;
        top: -20px;
        line-height: 30px;
        font-size: 12px;
        color: #666;
    }

    .webuploader-pick {
        width: 120px;
        background: #1ab394;
        padding: 9px 0;
        font-size: 13px;
    }

    .webuploader-pick-hover {
        background: #19A689;
    }

</style>{/block}{block name="content"}

<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-lg-12">
            <div class="ibox ">
                <div class="ibox-content">
                    <form method="post">
                        <div class="box-item">
                            <div class="form-group row">
                                <label class="col-sm-1 col-form-label">标题</label>
                                <div class="col-sm-3">
                                    <input type="text" class="form-control" name="title" placeholder="请输入标题" value="{$info.title}">
                                </div>
                            </div>
                            <div class="hr-line-dashed"></div>
                        </div>

                        <div class="box-item">
                            <div class="form-group row layui-form">
                                <label class="col-sm-1 col-form-label">类型</label>
                                <div class="col-sm-2">
                                    <input type="radio" name="show_type" lay-filter="show_type" value="1" title="图文" {$info.show_type== '1' || $info.show_type != '2' ? 'checked' : ''}>
                                    <input type="radio" name="show_type" lay-filter="show_type" value="2" title="视频" {$info.show_type== '2' ? 'checked' : ''}>
                                </div>
                            </div>
                            <div class="hr-line-dashed"></div>
                        </div>

                        <div class="box-item">
                            <div class="form-group row layui-form">
                                <label class="col-sm-1 col-form-label">所属</label>
                                <div class="col-sm-6">
                                    <input type="radio" name="type" lay-filter="type" value="1" title="18天打卡内容" {$info.type== '1' || ($info.type != '2' && $info.type != '3') ? 'checked' : ''}>
                                    <input type="radio" name="type" lay-filter="type" value="2" title="18天打卡结束内容" {$info.type== '2' ? 'checked' : ''}>
                                    <input type="radio" name="type" lay-filter="type" value="3" title="软文内容" {$info.type== '3' ? 'checked' : ''}>
                                </div>
                            </div>
                            <div class="hr-line-dashed"></div>
                        </div>

                        <div class="box-item" id="day" style="display: none">
                            <div class="form-group row">
                                <label class="col-sm-1 col-form-label">打卡天数</label>
                                <div class="col-sm-3">
                                    <input type="number" class="form-control" name="day" placeholder="请输入打卡天数" value="{$info.day}">
                                </div>
                            </div>
                            <div class="hr-line-dashed"></div>
                        </div>

                        <div class="box-item box-item-content">
                            <div class="row">
                                <label class="col-sm-1 col-form-label">图文</label>
                                <div class="col-lg-6">
                                    <div class="ibox ">
                                        <textarea id="editor_id">{$info.content}</textarea>
                                        <textarea name="content" data-editor="kindEditor" style="display: none"></textarea>
                                    </div>
                                </div>
                            </div>

                            <div class="hr-line-dashed"></div>
                        </div>

                        <div class="box-item box-item-video">
                            <div class="form-group row"><label class="col-sm-1 col-form-label">视频</label>
                                <div class="col-sm-3">
                                    <div class="layui-progress layui-progress-big" lay-filter="number" lay-showPercent="true">
                                        <div class="layui-progress-bar" lay-percent="0%"></div>
                                    </div>
                                </div>

                                <div class="col-sm-3">
                                    <input type="file" id="file" accept="video/*" style="display: none">
                                    <input type="hidden" name="video" id="video" value="{$info['video']|default=''}"/>
                                    <div id="upload_video">
                                        上传视频
                                    </div>
                                </div>
                            </div>
                            <div class="form-group row" id="video_box">
                                <label class="col-sm-1 col-form-label"></label>
                                <div class="col-sm-3">
                                    <video preload="none" src="{$info.video}" controls></video>
                                </div>
                            </div>

                            <div class="hr-line-dashed"></div>
                        </div>

                        <input type="hidden" name="id" value="{:input('id')}">

                        <div class="form-group row">
                            <div class="col-sm-4 col-sm-offset-2">
                                <button type="button" class="btn btn-w-m btn-default back-page">返回</button>
                                <button type="button" class="btn btn-w-m btn-primary ajax-post">提交</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

{/block}

{block name='js'}
<script src="__STATIC__/layui/layui.js"></script>
<script type="text/javascript" src="__PLUG__/kindeditor/kindeditor-all.js"></script>
<script src="__PLUG__/webuploader-0.1.5/webuploader.js"></script>
<script>
    $(function () {
        var show_type = `{$info.show_type}`;
        var type = `{$info.type}` || 1;
        var video = `{$info.video}`;

        if (show_type == 2) {
            $('.box-item-content').hide();
            $('.box-item-video').show();
            if (video) $('#video_box').show();
            initUploader(); // 页面初始时就是视频，直接初始化
        } else {
            $('.box-item-content').show();
            $('.box-item-video').hide();
        }

        if (type == 1) {
            $('#day').show();
        } else {
            $('#day').hide();
        }
    })

    layui.use(['form', 'jquery'], function () {
        var form = layui.form;
        var $ = layui.jquery;

        form.on('radio(show_type)', function (data) {
            var value = data.value;
            var video = $('#video').val();

            if (value == 2) {
                $('.box-item-content').hide();
                $('.box-item-video').show();
                if (video) {
                    $('#video_box').show();
                } else {
                    $('#video_box').hide();
                }
                initUploader(); // 切换到视频时初始化 uploader
            } else {
                $('.box-item-content').show();
                $('.box-item-video').hide();
            }
        });

        form.on('radio(type)', function (data) {
            var value = data.value;
            if (value == 1) {
                $('#day').show();
            } else {
                $('#day').hide();
            }
        });
    });

    // 初始化富文本编辑器
    initKindEditor('editor_id', 'content');

    /************   WebUploader upload video start   ************/
    var uploader = null;
    var uploader_loading;

    function initUploader() {
        if (uploader) return; // 避免重复初始化

        uploader = WebUploader.create({
            swf: '__PLUG__/webuploader-0.1.5/Uploader.swf',
            server: "{:url('/upload/UploadFile/webUploaderUploadFile')}",
            pick: "#upload_video",
            resize: false,
            auto: true,
            fileVal: 'file',
            multiple: false,
            chunked: true,
            chunkSize: 5 * 1024 * 1024,
            fileSingleSizeLimit: 10 * 1024 * 1024 * 1024
        });

        uploader.on('uploadProgress', function (file, percentage) {
            var percent = parseFloat(percentage * 100).toFixed(2);
            layui.element.progress('number', percent + '%');
            if (percent == 100) {
                uploader_loading = layer.load(2, {
                    shade: [0.8, '#393D49'],
                    content: '<span style="margin-left: -145px;color: red;">正在完成上传视频最后步骤，请勿刷新页面！！！</span>',
                    success: function (layero) {
                        layero.find('.layui-layer-content').css({
                            'padding-top': '50px',
                            'width': '300px',
                            'font-size': '16px',
                            'font-weight': '600'
                        });
                    }
                });
            }
        });

        uploader.on('uploadSuccess', function (file, res) {
            layer.close(uploader_loading);
            var path = res.data.path;
            $('#video').val(path);
            $('#video_box').show().find('video').attr('src', path);
        });
    }

    /************   WebUploader upload video end   ************/
</script>{/block}
